import React from 'react'
import ReactDOM from 'react-dom'
/* 
  1. 展示评论列表功能 ✅
    1.1 通过state提供评论列表的数据
    1.2 通过map可以动态的渲染
  2. 清空评论的功能 ✅
    1.1 清空 state 的数组
    1.2 评论列表 和 暂无评论 实现互斥
  3. 发表新的评论功能 ✅
    3.1 受控组件处理 state
    3.2 数组前追加
    3.3 非空判断
    3.4 清空输入框和文本组
  4. 删除评论功能
*/
import './index.css'

class App extends React.Component {
  state = {
    list: [
      { id: 1, username: '王思聪', content: '想你的夜' },
      { id: 2, username: '王思聪2', content: '想你的夜2' },
      { id: 3, username: '王思聪3', content: '想你的夜3' },
    ],
    // 用户名输入框
    username: '',
    // 评论内容
    content: '',
  }

  //  2. 清空评论的功能
  handleClear = () => {
    // this.state.list = []
    this.setState({ list: [] })
  }

  // 3. 发表新的评论功能
  handlePublish = (e) => {
    // 💥 阻止表单刷新页面的默认行为
    e.preventDefault()
    // 获取输入框 和 文本域的值
    const { username, content } = this.state
    // 非空判断
    if (username.trim() === '' || content.trim() === '') return alert('用户名或发布内部不能为空')
    // console.log({ username, content })
    // 🔔 基于旧数组拼接成新数组，setState 实现 state更新 和 UI更新
    this.setState({
      list: [{ id: Date.now(), username, content }, ...this.state.list],
      username: '',
      content: '',
    })
    // this.setState({ username: '', content: '' })
  }

  // 表单-受控组件 state 更新
  handleChange = (e) => {
    this.setState({ [e.target.name]: e.target.value })
  }

  // 4. 删除评论功能
  // 🔔 React 重要思想：单向数据流，this.state 只负责访问，更新需要用 this.setState()
  handleDel = (id) => {
    // console.log(id)
    // 💥 没有通过 setState的方式直接修改了 state 的数组是不推荐的(会有一些坑)
    // this.state.list.splice()
    // ✅ 基于原数组处理成功一份新的数据，再通过 setState 更新
    // const newList = this.state.list.filter((item) => item.id !== id)
    // console.log(this.state.list)
    // console.log(newList)
    this.setState({ list: this.state.list.filter((item) => item.id !== id) })
  }

  render() {
    return (
      <div className='app'>
        {/* 表单提交的时候，运行发布评论的函数 */}
        <form onSubmit={this.handlePublish}>
          <input value={this.state.username} name='username' onChange={this.handleChange} className='user' type='text' placeholder='请输入评论人' />
          <br />
          <textarea value={this.state.content} name='content' onChange={this.handleChange} className='content' cols='30' rows='10' placeholder='请输入评论内容' />
          <br />
          <button>发表评论</button>
          {/* 💥 清空评论按钮需要改造为普通按钮 type="button"，因为form结构包裹的 button 默认type为submit */}
          <button type='button' onClick={this.handleClear}>
            清空评论
          </button>
        </form>
        {/* 利用三元表达式实现条件渲染 */}
        {this.state.list.length > 0 ? (
          <ul>
            {this.state.list.map((item) => (
              <li key={item.id}>
                <h3>评论人：{item.username}</h3>
                <p>评论内容：{item.content}</p>
                <button onClick={() => this.handleDel(item.id)}>删除</button>
              </li>
            ))}
          </ul>
        ) : (
          <div>暂无评论</div>
        )}
      </div>
    )
  }
}

// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))
